<template>
  <div class="box">
    <div class="bar-chart" ref="redContainer"></div>
    <div class="jine"><b>交易金额总数8068</b></div>
    <div class="Tongj"><b>成交统计</b></div>

    <svg
      t="1675309397179"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="3398"
      width="50"
      height="50"
    >
      <path
        d="M511.264243 70.25611c-244.22942 0-442.169585 197.940165-442.169585 442.169585s197.940165 442.169585 442.169585 442.169585c244.143463 0 442.169585-197.940165 442.169585-442.169585S755.407706 70.25611 511.264243 70.25611L511.264243 70.25611zM725.353203 474.945059l0 51.125401L571.975976 526.07046l0 102.337783 153.464207 0 0 51.125401L571.975976 679.533644l0 102.337783L469.638193 781.871427 469.638193 679.534667 316.173986 679.534667l0-51.125401 153.550165 0L469.724151 526.07046 316.173986 526.07046l0-51.125401 158.300352 0.604774L265.048585 270.355451l102.337783 0 153.464207 153.464207 153.464207-153.464207L776.652566 270.355451 584.930009 475.549833 725.353203 474.945059 725.353203 474.945059z"
        fill="#1296db"
        p-id="3399"
      ></path>
    </svg>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import * as echarts from "echarts";
//import { TubData } from "@/mockApi/Shujvpage/TubiaoData";

export default {
  name: "ZheXiantu",
  props: {
    xData: {
      type: Array,
      required: true,
    },
    yData: {
      type: Array,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      chart: null,
      option: {
        xAxis: {
          type: "category",
          data: this.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.yData,
            type: "line",
            smooth: true,
            name: "Email",
          },
        ],
      },
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.redContainer);
    this.chart.setOption(this.option);
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  position: relative;
}
.bar-chart {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
}

:deep(.el-button--primary) {
  top: 10px;
  position: absolute;
}
.jine {
  float: left;
  left: 1050px;
  top: 14px;
  z-index: 1;
  position: absolute;
  font-size: 22px;
}
.icon {
  position: absolute;
  top: 5px;
  left: 1000px;
}
.Tongj {
  position: absolute;
  top: 8px;
  z-index: 1;
  left: 630px;
  font-size: 26px;
}
</style>
